﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="knockout.aspx.cs" Inherits="web.knockout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Knockout Demo</title>
    <script type="text/javascript" src="javascript/jquery-1.7.js"></script>    
    <script type="text/javascript" src="javascript/knockout-2.1.0.js"></script> 
    
</head>
<body>
    <form id="form1" runat="server">      
        <div>
            <script type="text/javascript">
                /*$(function(){
                     var viewModel = {
                        shouldShowMessage: ko.observable(false) // Message initially visible
                    };
                    
                   viewModel.shouldShowMessage(false); // ... now it's hidden
                   viewModel.shouldShowMessage(true); // ... now it's visible again
                   ko.applyBindings(viewModel);
                });
                
                $(function(){
                    var viewModel = {
                        currentProfit: ko.observable(150000) // Positive value, so initially black
                    };
                    viewModel.currentProfit(50); // Causes the DIV's contents to go red

                    ko.applyBindings(viewModel);
                });
                
                
                $(function(){
                   
                     var viewModel = {
                        currentProfit: ko.observable(150000) // Positive value, so initially black
                    };
                    viewModel.currentProfit(50); // Causes the DIV's contents to go red
                    
                    ko.applyBindings(viewModel);
                    
                   

          
                });
                    */
            </script>
            
            
            <!--
            <div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'green' }">
               Profit Information
            </div>

            <div data-bind="visible: shouldShowMessage">
                You will see this message only when "shouldShowMessage" holds a true value.
            </div>-->
            
            <script type="text/javascript">
             $(function(){
                    var viewModel2 = {
                        url: ko.observable("http://www.baidu.com/"),
                        details: ko.observable("Report including final year-end statistics"),
                        targetname: ko.observable("_blank")
                    };
                    
                    ko.applyBindings(viewModel2);
                    
                   

          
                });
            </script>
            <a data-bind="attr: { href: url, title: details, target: targetname}">
                Report
            </a>

            
        </div>
    </form>
</body>
</html>
